<div class="body">
    <div class="container2 ">
        <div class="left box " [ngClass]="{
            'zoomleft':CanOpenLeft,
            'zoomright':clicked && !CanOpenLeft
         }">
            <canvasmsg-root *ngIf="LeftLoad" [msgdata]="msgdata" [LeftLoad]="LeftLoad"></canvasmsg-root>
            <div class="open" (click)="openleft()">
                <img class="lefticon" [src]="CanOpenLeft?'./assets/img/lefticon1.png':'./assets/img/msg.png'" alt="">
            </div>
        </div>
        <div class="mid">
            <div class="mainbox" @fadeIn>
                <div class="main" [ngStyle]="{
                'width':mainW-10+'px',
                'height':mainH-10+'px',
                'margin-top':marginTop+'px'
                }">
                    <img class="mainback" *ngIf="LeftLoad&&msgdata.BackGroundImg" [src]="'./assets/img/'+msgdata?.BackGroundImg" [ngStyle]="{
                    'width':mainW-2+'px',
                    'height':mainH-2+'px'
                    }">
                    <notecanvas-root #note *ngIf="CanvasType=='note'" [CanvasGroupGuid]="FK_CanvasGroupGuid" [mainW]="mainW" [mainH]="mainH" (deldata)="Del($event)">
                    </notecanvas-root>
                    <questioncanvas-root #question *ngIf="CanvasType=='question'" [CanvasGroupGuid]="FK_CanvasGroupGuid" [mainW]="mainW" [mainH]="mainH" (deldata)="Del($event)">
                    </questioncanvas-root>
                    <blockcanvas-root #block *ngIf="CanvasType=='block'" [CanvasGroupGuid]="FK_CanvasGroupGuid" [mainW]="mainW" [mainH]="mainH" (deldata)="Del($event)">
                    </blockcanvas-root>
                </div>
            </div>
        </div>
        <div class="right box" [ngClass]="{
            'zoomleft2':OpenRight,
            'zoomright2':clicked2 && !OpenRight
        }">
            <div class="open2">
                <div class="imgbox2" *ngIf="OpenRight"></div>
                <div>
                    <div class="imgbox" style="border-bottom: 1px solid #999;" [ngClass]="{
                        'hideOut':OpenRight,
                        'hideIn':clicked2 && !OpenRight
                    }">
                        <div class="icon-1 menu-icon" nzTitle="训练标题" nzPlacement="left" nz-tooltip (click)="openTrainMsg()"></div>
                        <div #rate class="icon-uniE909 menu-icon" (click)="isRate=!isRate">
                        </div>
                    </div>
                    <div class="imgbox" [ngClass]="{
                        'hideOut':OpenRight,
                        'hideIn':clicked2 && !OpenRight
                    }">

                        <div class="icon--3 menu-icon" nzTitle="返回上一页" nzPlacement="left" nz-tooltip (click)="goback()"></div>
                        <div class="icon-6 menu-icon" nzTitle="放大" nzPlacement="left" nz-tooltip (click)="lg()"></div>
                        <div class="icon-2 menu-icon" nzTitle="缩小" nzPlacement="left" nz-tooltip (click)="sm()"></div>
                        <div class="icon-4 menu-icon" nzTitle="恢复缩放" nzPlacement="left" nz-tooltip (click)="rester()"></div>
                        <div class="icon-8 menu-icon" nzTitle="生成数据" nzPlacement="left" nz-tooltip (click)="Canvasdata()"></div>
                        <div class="icon-3 menu-icon" nzTitle="生成思维导图" nzPlacement="left" nz-tooltip (click)="Canvascharts()"></div>
                        <div class="icon-7 menu-icon" nzTitle="扫码添加" [nzTrigger]="'click'" nzPlacement="left" nz-tooltip (click)="opencode()"></div>
                    </div>
                </div>

                <div class="" nzTitle="打开回收站" class="icon-5 menu-icon righticon clickhover imgRight" nzPlacement="left" (click)="right()"></div>
                <!-- <img [src]="OpenRight?'./assets/img/left-icon.png':'./assets/img/right-icon.png'" nzTitle="打开回收站" nzPlacement="left" alt="" class="righticon clickhover imgRight" (click)="right()"> -->
            </div>
            <canvasDustbin-root #questionDustbin (onRecovery)="Recovery($event)" [CanvasGroupGuid]="FK_CanvasGroupGuid"></canvasDustbin-root>

        </div>
        <div class="rate-box" *ngIf="isRate">
            <div class="rate-box-box">
                <div class="rate-box-left">
                    <div style="    margin-bottom: 4px;">训练评分:</div>
                    <div style="color:#d74a99">
                        <nz-rate [ngModel]="canvasRate/2" (ngModelChange)="rating($event)" nzAllowHalf></nz-rate>{{canvasRate}}分
                    </div>
                </div>
                <div class="rate-box-right">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mask" *ngIf="CanOpenLeft" (click)="CanOpenLeft=false"></div>
<div class="mask" *ngIf="OpenRight" (click)="closeDustbin()"></div>
<div class="mask" *ngIf="OpenCode" (click)="OpenCode = false"></div>
<div class="mask mask2" *ngIf="OpenCharts" (click)="CloseCharts()"></div>
<div class="mask mask2" *ngIf="Opendata" (click)="CloseCharts()"></div>
<div class="mask mask2" *ngIf="isTrainMsgOpen" (click)="openTrainMsg()"></div>
<div class="CodeBox " [ngStyle]="{
    'height':codemsg.h+'px',
    'width':codemsg.w+'px'
}" [ngClass]="{
    'slideInDown':OpenCode,
    'slideOutUp':clicked3 && !OpenCode
}">
    <canvasCode-root (onCloseCode)="closecode()" (onCodeSM)="onCodeSM($event)" (onCodeLG)="onCodeLG($event)" [CanvasGroupGuid]="FK_CanvasGroupGuid" [codemsg]="codemsg" [trainMsg]="trainMsg"></canvasCode-root>
</div>
<div class="charts" [ngClass]="{
    'zoomTop':OpenCharts,
    'zoomBottom':clicked4 && !OpenCharts
}">
    <charts-root #charts (onCloseCharts)="CloseCharts()"></charts-root>
</div>
<div class="charts" [ngClass]="{
    'zoomTop':Opendata,
    'zoomBottom':clicked5 && !Opendata
}">
    <data-root #data (onCloseCharts)="CloseCharts()"></data-root>
</div>

<trainMsg-root *ngIf="isTrainMsgOpen" [trainMsg]="trainMsg"></trainMsg-root>